<template>
  <div>
    <!-- 导航栏 -->
    <mt-header fixed title="附近店家" style="background: #f49b00">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div style="height: 40px"></div>

    <div id="container"></div>
    <div id="panel">
      {{ this.data }}
    </div>
  </div>
</template>

<script type="text/javascript">
window._AMapSecurityConfig = {
  securityJsCode: "6aff523416605a639a2cf57111ce59e5",
};
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=f09f58c7fa7a777dbccfee14ce005bef"></script> 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import AMap from "vue-amap";

export default {
  data() {
    return {
      // map: null,
      data: [],
    };
  },
  mounted() {
    AMapLoader.load({
      key: "f09f58c7fa7a777dbccfee14ce005bef", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        var map = new AMap.Map("container", {
          zoom: 11, //级别
          // center: [116.397428, 39.90923], //中心点坐标
          viewMode: "3D", //使用3D视图
        });

        AMap.plugin("AMap.Geolocation", function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量
            offset: [10, 20],
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            position: "RB",
          });

          geolocation.getCurrentPosition(function (status, result) {
            if (status == "complete") {
              onComplete(result);
            } else {
              onError(result);
            }
          });

          function onComplete(data) {
            // data是具体的定位信息
          }

          function onError(data) {
            // 定位出错
          }
        });

        // 获取搜索信息
        var keywords = "北京大学";
        AMap.plugin("AMap.PlaceSearch", function () {
          var autoOptions = {
            city: "全国",
          };
          var placeSearch = new AMap.PlaceSearch(autoOptions);
          placeSearch.search(keywords, function (status, result) {
            // 搜索成功时，result即是对应的匹配数据
            // var node = new PrettyJSON.view.Node({
            //     el: document.querySelector("#input-info"),
            //     data: result
            // });
            // alert(result.poiList);
            // this.map = result.poiList
            console.log(result.poiList);
          });
        });
        

      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>
<style>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css");
#container {
  width: 100vw;
  height: 100vh;
}
#panel {
  width: 300px;
  height: 100px;
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
